/**
 * @author 14544
 * @date 2020/4/16 15:39
 */
window.onload = function () {

    const myFileEle = document.querySelector('.myFile');
    const submitEle = document.querySelector('.submit');
    let uploader = null;
    let files = null;
    // 获取拖放的盒子
    let dropbox = document.getElementById("dropbox");
    // 分别绑定事件
    dropbox.addEventListener("dragenter", dragenter, false);
    dropbox.addEventListener("dragover", dragover, false);
    dropbox.addEventListener("drop", drop, false);

    // 进入拖放区域
    function dragenter(e) {
        e.stopPropagation();
        e.preventDefault();
        console.log('dragenter...')
    }
    // 在拖放区域中
    function dragover(e) {
        e.stopPropagation();
        e.preventDefault();
        // dropEffect 、effectAllowed属性控制在拖放操作中给用户的反馈（通常是视觉上的）。它会影响在拖拽过程中光标的手势。
        // 例如，当用户 hover 在一个放置目标元素上，浏览器的光标可能会预示了将会发生什么操作。
        // 通常在dragenter、dragover中设置，而effectAllowed在dragstart中设置以便为拖动源设置所需的拖动效果
        e.dataTransfer.dropEffect = 'link'  // 建立一个源位置到新位置的链接. 浏览器会出现一个链接的图标提示
        console.log('dragover...')
    }

    // 我们其实并不需要对dragenter and dragover 事件进行处理，所以这些函数都很简单。他们只需要包括禁止事件传播和阻止默认事件：
    // 放下文件到区域中
    function drop(e) {
        e.stopPropagation();
        e.preventDefault();
        console.log('drop...')
        // 我们从事件中获取到了dataTransfer 这个域，然后从中得到文件列表，再将它们传递给handleFiles()函数。
        // 在这之后，处理文件的方法和用input元素或者用拖拽就是一样的了
        var dt = e.dataTransfer;

        console.log("drop: dataTransfer = ",dt)
        // 使用 e.dataTransfer.items 获取文件列表
        if (dt.items != null) {
            for (var i=0; i < dt.items.length; i++) {
                console.log("... items[" + i + "].kind = " + dt.items[i].kind + " ; type = " + dt.items[i].type);
                console.log('file:',dt.items[i].getAsFile())
            }
        }
        // 使用  e.dataTransfer.files 获取列表接口
        files = dt.files;
        let str = `已选择了${files.length}个文件，分别是:\n\n`
        for (let i = 0; i < files.length; i++) {
            const file = files[i];
            str+=`name:${file.name},size:${file.size} byte\n`
        }
        dropbox.innerText = str
        console.log(files)
        calculateTotalSize()
    }

    myFileEle.addEventListener('change', function () {
        files = this.files;
        console.log(files)
        calculateTotalSize()
    }, false)


    submitEle.addEventListener('click', function () {
        uploadFun()
    })

    // 上传函数
    function uploadFun() {
        uploader = new XMLHttpRequest();
        uploader.open('POST', '/gov/openapi/uploadFile', true);
        uploader.upload.onloadstart = function () {
            console.log('上传开始')
        }
        uploader.upload.onprogress = function () {
            console.log('上传中...')
        }
        uploader.upload.onload = function () {
            console.log('上传成功')
        }
        uploader.upload.onerror = function () {
            console.log('上传失败')
        }
        let formData = new FormData()
        formData.append('file', files[0])
        uploader.send(formData)
    }

    // 计算所选文件的总大小,并格式化文件单位
    function calculateTotalSize() {
        let totalBytes = 0;
        for (let i = 0; i < files.length; i++) { // 计算文件大小总和
            totalBytes+= files[i].size;
        }
        const sizeUnitArr = ["KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]; // 展示单位
        let formatSize = '';
        for (let approxSize = totalBytes/1024,i=0; i<sizeUnitArr.length;approxSize/=1024,i++) {
            // 初始化时总和除以1024，approxSize表示kb，再除以1024就表示mb，以此类推，所以可以根据索引表示当前除了多少次1024，根据索引就获取对应的展示单位了
            approxSize = approxSize.toFixed(3); // 保留三位小数
            if (approxSize<=0) return;
            formatSize =  `${approxSize} ${sizeUnitArr[i]} format size in ${totalBytes} Bytes`;
            console.log(formatSize)
        }
    }
}
